<template>
  	<el-dialog class="modify-class" width="1200px" title="查看详情" visible append-to-body :close-on-click-modal="false" :before-close="beforeClose">
	  	<c-table class="mt20 mb20" :table-column="tableColumn" :table-data="detailData" :operation="false"></c-table>
		  <div style="padding: 10px;text-align: center;display:flex;justify-content: space-around;">
		       <div class="page-wrap">
					<el-pagination
						background
						layout="total, prev, pager, next, jumper"
						:page-size="pageOptions.pageSize"
						:total="pageOptions.total"
						:page-sizes="pageOptions.sizes"
						@current-change="pageCurrentChanges"
					>
					</el-pagination>
			   </div>
	      	</div>
  	</el-dialog>
</template>

<script>
export default {
  	props: {
    	detailData: {
      		type: Array,
      		default() {
        		return []
      		}
    	},
		pageOptions: {
			type: Object,
      		default() {
        		return {}
      		}
		}
  	},
  	data() {
	    return {
	      	tableColumn: {
		        deviceCode: {
		          	label: '设备代号',
		          	columnProp: {
		            	align: 'center'
		          	}
		        },
		        deviceName: {
		          	label: '设备名称',
		          	columnProp: {
		            	align: 'center'
		          	}
		        },
		        productionOrg: {
		          	label: '生产单位',
		          	columnProp: {
		            	align: 'center'
		          	}
		        },
		        designOrg: {
		          	label: '设计单位',
		          	columnProp: {
		            	align: 'center'
		          	}
		        },
		        matchOrg: {
		          	label: '齐套单位',
		          	columnProp: {
		            	align: 'center'
		          	}
		        },
		        deviceNo: {
		          	label: '设备编号',
		          	columnProp: {
		            	align: 'center'
		          	},
		        },
		        instockOperator: {
		          	label: '入库人',
		          	columnProp: {
		            	align: 'center',
		          	},
		        },
		        instockTime: {
		          	label: '入库时间',
		          	columnProp: {
		            	align: 'center',
		          	},
		        },
		        outstockOperator: {
		          	label: '出库人',
		          	columnProp: {
		            	align: 'center',
		          	},
		        },
		        outstockTime: {
		          	label: '出库时间',
		          	columnProp: {
		            	align: 'center',
		          	},
		        },
		        remark: {
		          	label: '备注',
		          	columnProp: {
		            	align: 'center',
		          	},
		        }
	      	}
	    }
  	},
  	methods: {
		// 分页操作
	    sizeCurrentChanges(size) {
	      	this.pageOptions.pageSize = size
			this.$emit('detailsChange')
	    },
	    pageCurrentChanges(page) {
	      	this.pageOptions.page = page
			this.$emit('detailsChange',page)
	    },
    	beforeClose() {
      		this.$emit("close")
    	}
  	}
}
</script>
